<template>
    <div>
        <!-- 搜索表单 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="名称">
                <el-input v-model="formInline.name" placeholder="名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
                <el-button type="primary" @click="add">新增</el-button>
            </el-form-item>
        </el-form>
        <!-- 搜索表单 -->
        <!-- 展示表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="ID" prop="id"> </el-table-column>
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="年龄" prop="age"> </el-table-column>
            <el-table-column label="地址" prop="address"> </el-table-column>
            <el-table-column label="电话" prop="phone"> </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 展示表格 -->
        <!-- 分页 -->
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page="pageNum"
            @current-change="handleCurrentChange"
        >
        </el-pagination>
        <!-- 分页 -->
        <!-- 新增弹窗 -->
        <el-dialog title="新增" :visible.sync="dialogVisible" width="50%">
            <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名字">
                    <el-input v-model.number="ruleForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model.number="ruleForm.age"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model.number="ruleForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model.number="ruleForm.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="sure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 新增弹窗 -->
        <!-- 编辑弹窗 -->
        <el-dialog title="编辑" :visible.sync="editDialogVisible" width="50%">
            <el-form :model="editForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名字">
                    <el-input v-model.number="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model.number="editForm.age"></el-input>
                </el-form-item>
                <el-form-item label="电话">
                    <el-input v-model.number="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="地址">
                    <el-input v-model.number="editForm.address"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="editSure">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑弹窗 -->
    </div>
</template>

<script>
import network from '../network/index'; //导入请求
export default {
    data() {
        return {
            formInline: {
                name: ''
            }, //搜索表单数据
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1517 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1519 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1516 弄'
                }
            ], //表格展示数据
            pageNum: 1, //当前页码
            pageSize: 5, //一页多少条
            total: 0, //请求过来的总条数
            dialogVisible: false, //控制新增弹窗
            editDialogVisible: false, //控制编辑弹窗
            ruleForm: {
                name: '',
                age: '',
                phone: '',
                address: ''
            }, //新增表单数据
            editForm: {
                name: '',
                age: '',
                phone: '',
                address: '',
                id: null
            } //编辑弹窗数据
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        /**
         * 当前页改变时监听方法
         * @val 当前页页码
         */
        handleCurrentChange(val) {
            this.pageNum = val; //把当前页页码赋值给我们请求的当前页页码
            this.getData();
            console.log(val);
        },
        // 获取表格数据
        getData() {
            // 请求接口前
            // 接口的请求地址
            // 接口的请求方式
            // 接口需要的数据
            network({
                url: '/students/check',
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.formInline.name
                }
            }).then((res) => {
                console.log(res);
                this.tableData = res.data.results; //拿到数据并赋值给展示表格
                this.total = res.data.total;
            });
        },
        //查询
        onSubmit() {
            this.pageNum = 1;
            this.getData();
        },
        // 编辑
        handleEdit(i, row) {
            console.log(i, 'i');
            console.log(row, 'row');
            // this.editForm = row;
            this.editForm.name = row.name; //编辑时赋值
            this.editForm.age = row.age; //编辑时赋值
            this.editForm.phone = row.phone; //编辑时赋值
            this.editForm.address = row.address; //编辑时赋值
            this.editForm.id = row.id; //编辑时赋值
            this.editDialogVisible = true;
        },
        // 删除
        handleDelete(i, row) {
            console.log(i, 'i');
            console.log(row.id, 'row');
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    network({
                        url: '/students/delete',
                        method: 'delete',
                        data: {
                            id: row.id
                        }
                    }).then((res) => {
                        if (res.data.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.getData();
                        } else {
                            this.$message({
                                message: '删除失败!'
                            });
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 打开添加弹窗
        add() {
            this.dialogVisible = true;
        },
        // 确定添加
        sure() {
            network({
                url: '/students/add',
                method: 'post',
                // data: {
                //     name: this.ruleForm.name,
                //     age: this.ruleForm.age,
                //     phone: this.ruleForm.phone,
                //     address: this.ruleForm.address
                // }
                data: this.ruleForm
            }).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getData();
                    this.dialogVisible = false;
                }
                console.log(res);
            });
        },
        //确定编辑
        editSure() {
            network({
                url: '/students/edit',
                method: 'put',
                data: this.editForm
            }).then((res) => {
                if (res.data.code === 200) {
                    this.$message({
                        type: 'success',
                        message: '修改成功!'
                    });
                    this.getData();
                    this.editDialogVisible = false;
                }
            });
        }
    }
};
</script>

<style></style>
